<template>
  <Search v-model="searchValue" @update:modelValue="handleSearch" />
  <!-- 列表内容 -->
  <div class="list-wrap">
    <van-pull-refresh
      v-model="refreshing"
      :head-height="60"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :offset="10"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="user-item" v-for="item in list" :key="item._id">
          <div class="user-info">
            <van-image round width="40" height="40" :src="item.avatar" />
            <div class="user-detail">
              <div class="username">{{ item.username }}</div>
            </div>
          </div>
          <div class="action-btn">
            <van-button size="small" type="default" @click="handleFollow(item._id)">
              已关注
            </van-button>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { userApi } from '@/api/user'
import Search from '@/components/Search.vue'
import { useList } from '@/views/profile/hooks/useUserList'
import { useRoute } from 'vue-router'
const route = useRoute()

const {
  refreshing,
  loading,
  finished,
  list,
  searchValue,
  getList,
  handleSearch,
  onRefresh,
  onLoad,
} = useList(userApi.getFollowUsers, route.params.id)

// 关注/取消关注
const handleFollow = async (uId) => {
  try {
    await userApi.unfollow(uId)
    getList(true)
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
@import '../styles/user-list.css';
</style>
